<template>
  <div id="page-wechat-view">
    <h2>微信对接配置</h2>
    <Card :bordered="false">
      <Row>
        <Col span="18" offset="2">
          <Form ref="form" :model="form" :label-width="200" :rules="rules" class="mt20">
            <FormItem prop="wechatAppId" label="微信公众账号(应用ID)">
              <Input v-model="form.wechatAppId" placeholder="请输入"></Input>
            </FormItem>
            <FormItem prop="wechatSecret" label="应用秘钥">
              <Input v-model="form.wechatSecret" placeholder="请输入"></Input>
            </FormItem>
            <FormItem prop="backUrl" label="用户信息回调地址" >
              <Input v-model="form.backUrl" placeholder="请输入" disabled></Input>
            </FormItem>
            <FormItem prop="wechatToken" label="Token(令牌)">
              <Input v-model="form.wechatToken" placeholder="请输入"></Input>
            </FormItem>
            <FormItem prop="pushNoticeTlpid" label="推送消息模板ID">
              <Input v-model="form.pushNoticeTlpid" placeholder="请输入"></Input>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                :loading="isSubmiting"
                @click="onSubmit('form')">
                保存
              </Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import wechatApi from '@/api/wechat'

  export default {
    data () {
      return {
        isSubmiting: false,
        rules: {
          wechatAppId: [
            { required: true, message: '请输入微信公众账号(应用ID)', trigger: 'change' },
            { max: 50, message: '微信公众账号(应用ID)字符长度应小于50', trigger: 'change' }
          ],
          wechatSecret: [
            { required: true, message: '请输入应用秘钥', trigger: 'change' },
            { max: 50, message: '应用秘钥字符长度应小于50', trigger: 'change' }
          ],
          backUrl: [
            { max: 100, message: '回调地址字符长度应小于100', trigger: 'change' }
          ],
          wechatToken: [
            { required: true, message: '请输入Token(令牌)', trigger: 'change' },
            { max: 50, message: 'Token(令牌)字符长度应小于50', trigger: 'change' }
          ],
          pushNoticeTlpid: [
            { max: 50, message: '推送消息模板ID字符长度应小于50', trigger: 'change' }
          ]
        },
        form: {
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isSubmiting = true
            this.save()
          } else {
            return false
          }
        })
      },
      async detail () {
        const { body } = await wechatApi.getSetting({ pkRcId: this.userInfo.pkRclubInfo })
        this.form = body.responseData || {}
      },
      async save () {
        const { body } = await wechatApi.updateSetting(this.form)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('保存成功')
          this.$router.push({path: '/wechat/view'})
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.detail()
    }
  }
</script>
